<template>
  <div>
    <i style="padding: 12px" @click="back" class="el-icon-arrow-left"></i>
    <div class="bottom-box" align="center">
      <p class="header text-muted login-box-item">{{ music_name }}</p>
    </div>
    <div align="center" style="margin-top: 100px;">
      <img alt="唱片" v-bind:class="{header :playing}" class="music-image " src="../assets/book.png">
    </div>

    <div align="center">
      <audio style="color: lightpink" class="music-player" id="audio" ref='audio' @ended="load_music"
             @playing="on_playing" @pause="on_pause"
             controls autoplay>
        您的浏览器不支持 audio 元素。
      </audio>
    </div>

    <div class="bottom-box" align="center">
      <el-button class="next-btn" @click="load_music" type="primary" round>下一首</el-button>
    </div>

  </div>

</template>

<script>
import UrlConfig from '../utils/api'

export default {
  name: 'BookList',
  data () {
    return {
      playing: false,
      music_name: '系统一直随机播放歌曲'
    }
  },
  methods: {
    load_music () {
      this.$fetch(UrlConfig.music_random)
        .then(this.on_data_load)
    },
    on_playing () {
      this.playing = true
    },
    on_pause () {
      this.playing = false
    },
    on_data_load (res) {
      this.playing = false
      this.$refs.audio.src = UrlConfig.music_base + res.data.data.video_src
      this.music_name = res.data.data.video_name
    },
    back () {
      this.$router.push({
        path: '/'
      })
    }
  },
  mounted: function () {
    const context = this
    this.$fetch(UrlConfig.music_random)
      .then(context.on_data_load)
  }
}
</script>

<style scoped>
  .music-image {
    width: 40%;
    height: 40%;
    border-radius: 50%;
  }

  .music-player {
    margin-top: 40px;
  }

  .header {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @keyframes rotateImg {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes rotateImg {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  .bottom-box {
    margin-top: 80px;
  }

  .next-btn {
    width: 200px;
  }
</style>
